
<script>
import {
  computed,
  ref,
  watch,
  getCurrentInstance,
  reactive,
  onMounted,
  toRefs,
} from "vue";
import PlayMusic from "@/page/playmusic/index.vue";
import { useStore } from "vuex";
export default {
  components: { PlayMusic },
  setup(props, { emit }) {
    const store = useStore();
    const SongId = ref(0);
    const SongNum = ref(0);
    const showBottom = ref(false);
    const { proxy } = getCurrentInstance();
    const audio = ref();
    const currentRate = ref(0);
    const rotating = ref();
    const pause = ref(true);
    const currentPlayTime = ref(0);
    const currentPlayRate = ref(0);
    const durationTime = ref("00:00");
    const CurrentTime = ref("00:00");
    let player;
    let pauseActive;
    const songObj = reactive({
      picUrl: "",
      name: "",
    });
    // 播放暂停事件
    const playClick = () => {
      // Todo: currentTime用于判断歌词时间，解决传值
      if (pause.value) {
        audio.value.play();
        rotating.value.classList.add("animate");
        pause.value = false;
        // 添加timer，记录歌曲播放时间
        start();
      } else {
        audio.value.pause();
        rotating.value.classList.remove("animate");
        pause.value = true;
        // 移除时间
        end();
      }
    };
    const PlayMusicClick = () => {
      showBottom.value = true;
    };
    // 计时器开始及结束
    const start = () => {
      player = setInterval(() => {
        currentPlayTime.value = audio.value.currentTime;
        CurrentTime.value = audio.value.currentTime;
        currentPlayRate.value =
          (currentPlayTime.value / audio.value.duration) * 100;
      }, 1000);
    };
    const end = () => {
      player = clearInterval(player);
    };
    // 接受儿子的反馈
    const showBottomNew = (val) => {
      showBottom.value = val.data;
    };
    const pauseNew = (val) => {
      pause.value = val.data;
      if (!pause.value) {
        audio.value.play();
        rotating.value.classList.add("animate");
        // 添加timer，记录歌曲播放时间
        start();
      } else {
        audio.value.pause();
        rotating.value.classList.remove("animate");
        // 移除时间
        end();
      }
    };
    // 获取时间
    const changeDuration = () => {
      durationTime.value = audio.value.duration;
    };

    onMounted(() => {
      document.getElementById("media").addEventListener(
        "ended",
        () => {
          pause.value = true;
          rotating.value.classList.remove("animate");
          player = clearInterval(player);
          emit("SongNew", { data: 1 });
        },
        false
      );
      SongId.value = store.state.songid;
      getSong();
    });
    // 监听歌曲id
    let CurSongId = computed(() => {
      return store.state.songid;
    });
    // 监听是否播放
    let CurPlay = computed(() => {
      return store.state.songnum;
    });
    watch([CurSongId, CurPlay], (newVal) => {
      SongId.value = newVal[0];
      SongNum.value = newVal[1];
      getSong();
    });
    // 获取歌曲信息
    const getSong = () => {
      if (SongId.value == 0) return;
      audio.value.pause();
      pause.value = true;
      proxy.$http
        .get(`${proxy.$api}/song/detail?ids=${SongId.value}`)
        .then((res) => {
          if (res.status === 200) {
            if (res.data.songs.length == 0) return;
            songObj.picUrl = res.data.songs[0].al.picUrl;
            songObj.name = res.data.songs[0].name;
            if (SongNum.value == 1) {
              playClick();
            }
          }
        });
        proxy.$http
        .get(`${proxy.$api}/song/url/v1?id=${SongId.value}&level=lossless`)
        .then((res) => {
          audio.value.src = res.data.data[0].url;
        });
    };
    return {
      pause,
      audio,
      rotating,
      currentRate,
      currentPlayRate,
      songObj,
      showBottom,
      pauseActive,
      durationTime,
      CurrentTime,
      playClick,
      PlayMusicClick,
      showBottomNew,
      pauseNew,
      changeDuration,
    };
  },
};
</script>

<template>
  <div>
    <div class="play" @click="PlayMusicClick">
      <div class="left">
        <img :src="songObj.picUrl" alt="" ref="rotating" />
        <div class="name van-ellipsis">
          {{ songObj.name }}
        </div>
      </div>
      <div class="right">
        <div class="playbtn" @click.stop="playClick">
          <van-circle
            v-model:current-rate="currentRate"
            layer-color="#ccc"
            :rate="currentPlayRate"
            size="25"
            :style="{
              display: 'flex',
              'justify-content': 'center',
              'align-items': 'center',
            }"
          >
            <template #default>
              <span class="iconfont" style="font-size: 14px">{{
                pause == true ? "&#xe6a4;" : "&#xe61e;"
              }}</span>
            </template>
          </van-circle>
        </div>
        <van-icon name="wap-nav" size="25" color="#333" />
      </div>
    </div>
    <!-- 底部弹出 -->
    <van-popup
      :lazy-render="false"
      v-model:show="showBottom"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <PlayMusic
        :pause="pause"
        :durationTime="durationTime"
        :CurrentTime="CurrentTime"
        :currentPlayRate="currentPlayRate"
        @showBottomNew="showBottomNew"
        @pauseNew="pauseNew"
      ></PlayMusic>
    </van-popup>
    <!-- 这里后期需要配置 -->
    <audio
      id="media"
      ref="audio"
      :src="'https://music.163.com/song/media/outer/url?id=33894312.mp3'"
      @canplay="changeDuration"
    ></audio>
  </div>
</template>

<style lang="less" scoped>
@keyframes rotating {
  100% {
    transform: rotate(360deg);
  }
}
.animate {
  animation: rotating 10s infinite linear;
}
.play {
  padding: 10px;
  display: flex;
  background: #fff;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    .name {
      font-size: 12px;
      font-weight: 700;
      margin-left: 10px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .playbtn {
      margin-right: 15px;
    }
  }
}
</style>